<template>
	<view>
		<view  class="un-top" >
			<image src="/static/temp/ad2.jpg" mode="scaleToFill"></image>
		</view>
		
		<view class="un-section">
			<view class="un-s">
				<text class="clamp un-text1">积分</text>
				<text class="clamp un-text">1000</text>
			</view>
			<view class="un-s1">
				<text class="clamp un-text1">积分</text>
				<text class="clamp un-text">1000</text>
			</view>
		</view>
		
		<view class="un-text-xin">
			新手任务
		</view>
		
		<view class="un-task" v-for="(item,index) in tasklist" :key="item.id">
			<view class="un-task-item" v-if="item.type===0">
				<text class="clamp un-task-text">{{item.name}}</text>
				<text class="clamp un-task-text1">积分+{{item.cheng}}  积分+{{item.you}}</text>
				<text class="un-button" v-if="item.status===0" @click="topage(tasklist,index)">做任务</text>
				<text class="un-button" v-if="item.status===1" @click="togglePopup('middle-img',tasklist,index)">领取</text>
				<text class="un-button1" v-if="item.status===2">已领取</text>
				<text class="un-button1" v-if="item.status===3">已完成</text>
			</view>
		</view>
		
		<view class="un-text-xin">
			日常任务
		</view>
		
		<view class="un-task" v-for="(item1,index1) in tasklist1" :key="item1.id">
			<view class="un-task-item" v-if="item1.type===1">
				<text class="clamp un-task-text">{{item1.name}}</text>
				<text class="clamp un-task-text1">积分+{{item1.cheng}}  积分+{{item1.you}}</text>
				<text class="un-button" v-if="item1.status===0" @click="topage(tasklist1,index1)">做任务</text>
				<text class="un-button" v-if="item1.status===1" @click="togglePopup('middle-img',tasklist1,index1)">领取</text>
				<text class="un-button1" v-if="item1.status===2">已领取</text>
				<text class="un-button1" v-if="item1.status===3">已完成</text>
			</view>
		</view>
		
		<view class="un-text-xin1">
			<text class="iconfont icon-tanhao" style="font-size: 28upx;"></text>
			<text> 相关奖励的详细规则请查看积分和积分的帮助说明。</text>
		</view>
		
		<uni-popup :show="type === 'middle-img'" position="middle" mode="insert"  @hidePopup="togglePopup('',tasklist,index)">
			<view class="un-center-box">
				<view class="un-ling">领取成功</view>
				<text class="un-dui iconfont icon-duihao"></text>
				<view class="un-text">{{this.currentlist[this.index].name}}领取成功</view>
				<view >
					<text class="un-text1">获得积分</text>
					<text class="un-text2">+{{this.currentlist[this.index].cheng}}</text>
					<text class="un-text1">获得积分</text>
					<text class="un-text2">+{{this.currentlist[this.index].you}}</text>
				</view>
				<text class="badge yticon icon-fork " @click="togglePopup('',tasklist,index)"></text>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniBadge from '@/components/uni-badge/uni-badge.vue';
	export default {
		components: {
			uniBadge,
			uniPopup
		},
		data() {
			return {
				tasklist:[
					{id:1,type:0,name:'新手欢迎奖励',cheng:10,you:5,status:1,nav:'',navtype:0},
					{id:2,type:0,name:'设置头像',cheng:5,you:5,status:0,nav:'usercenter/userdata/userdata',navtype:0},
					{id:3,type:0,name:'设置昵称',cheng:5,you:5,status:0,nav:'usercenter/userdata/userdata',navtype:0},
					{id:4,type:0,name:'完善个人信息',cheng:20,you:10,status:0,nav:'usercenter/userdata/userdata',navtype:0},
					{id:5,type:0,name:'成功关注1位达人',cheng:5,you:5,status:0,nav:'index/index',navtype:1},
					{id:6,type:0,name:'首次分享商品或专题',cheng:5,you:5,status:0,nav:'index/index',navtype:1},
					{id:7,type:0,name:'首次收藏商品或专题',cheng:5,you:5,status:0,nav:'index/index',navtype:1},
					{id:8,type:0,name:'首次购物成功',cheng:5,you:5,status:0,nav:'index/index',navtype:1},
					{id:9,type:0,name:'首次完成评价',cheng:10,you:10,status:0,nav:'comment/comment',navtype:0},
				],
				tasklist1:[
					{id:10,type:1,name:'每日登录',cheng:5,you:5,status:3,nav:'',navtype:0},
					{id:11,type:1,name:'每日签到',cheng:10,you:10,status:1,nav:'qiaodao/qiandao',navtype:0},
					{id:12,type:1,name:'分享商品或专题',cheng:5,you:5,status:0,nav:'index/index',navtype:1},
					{id:13,type:1,name:'邀请好友',cheng:10,you:5,status:0,nav:'invite/invite',navtype:0},
					{id:14,type:1,name:'好友首次下单成功',cheng:20,you:10,status:0,nav:'invite/invite',navtype:0},
					{id:15,type:1,name:'购物奖励',cheng:'结算金额',you:'结算金额*20%',status:0,nav:'index/index',navtype:1},
					{id:16,type:1,name:'购买天数达标',cheng:10,you:5,status:0,nav:'index/index',navtype:1},
					{id:17,type:1,name:'评价奖励',cheng:'5/+10/+15/+20',you:'+10/+20',status:0,nav:'comment/comment',navtype:0},
				],
				type: '',
				currentlist:[],
				index:0,
				
			}
		},
		onLoad() {
			this.currentlist=this.tasklist;
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			togglePopup(type,list,index) {
				if(type===''){
					this.type = type;
				}else{
					this.type = type;
					this.currentlist=list;
					this.index=index;
					list[index].status=2;
				}
			},
			topage(list,index){
				if(list[index].navtype===1){
					uni.switchTab({
						url: `/pages/${list[index].nav}`
					});
				}else{
					uni.navigateTo({
						url: `/pages/${list[index].nav}`
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
			background: #f5f5f5;
	}
	.un-top{
		width: 100%;
		height: 310upx;
		background: #fff;
		image{
			width:100%;
			height: 100%; 
		}
	}
	.un-section{
		background: #fff;
		width: 100%;
		height: 160upx;
		display: flex;
		.un-s{
			text-align: center;
			padding: 45upx 0upx;
			width: 50%;
			border-bottom: 2upx solid rgba(242, 242, 242, 1);
		}
		.un-s1{
			text-align: center;
			padding: 45upx 0upx;
			width: 50%;
			border-bottom: 2upx solid rgba(242, 242, 242, 1);
			border-left: 2upx  solid rgba(242, 242, 242, 1);
		}
		.un-text{
			font-family: 'Georgia Negreta', 'Georgia Normal', 'Georgia';
			font-weight: 700;
			color: #E02E24;
			font-size: 38upx;
		}
		.un-text1{
			font-weight: 400;
			color: #999999;
			font-size: 28upx;
		}
	}
	
	.un-text-xin{
		font-size: 28upx;
		padding-left: 50upx;
		color: #666666;
		margin: 30upx 0upx;
	}
	
	.un-task{
		background-color: #fff;
		
		.un-task-item{
			padding: 0upx 50upx;
			position: relative;
			border-top: 1upx solid rgba(242, 242, 242, 1);
			border-bottom: 1upx solid rgba(242, 242, 242, 1);
			height: 132upx;
			.un-task-text{
				font-size: 28upx;
				color: #666666;
				margin-top: 30upx;
				line-height: 40upx;
			}
			.un-task-text1{
				font-size: 24upx;
				color: #999999;
				line-height: 45upx;
			}
			.un-button{
				position: absolute;
				z-index: 1;
				background-color: #E02E24;
				width: 128upx;
				height: 48upx;
				border-radius: 10upx;
				font-size: 24upx;
				text-align: center;
				color: #fff;
				right: 50upx;
				top:40upx;
				line-height: 48upx;
			}
			.un-button1{
				position: absolute;
				z-index: 1;
				color: #CCCCCC;
				border: 2upx solid #CCCCCC;
				width: 128upx;
				height: 48upx;
				border-radius: 10upx;
				font-size: 24upx;
				text-align: center;
				right: 50upx;
				top:40upx;
				line-height: 48upx;
			}
		}
	}
	
	.un-text-xin1{
		font-size: 24upx;
		padding-left: 50upx;
		color: #666666;
		margin: 30upx 0upx;
	}
	
	.un-center-box{
		background-color: #fff;
		border: 2upx solid #9D9D9D;
		border-radius: 5%;
		width:507upx;
		height: 554upx;
		margin:0 30upx;
		text-align: center;
		.un-ling{
			background-color: #E02E24;
			width: 100%;
			height: 123upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 123upx;
			font-size: 38upx;
			font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
			font-weight: 700;
			font-style: normal;
			margin-bottom: 80upx;
		}
		.un-dui{
			font-size: 114upx;
			color: #E02E24;
		}
		.un-text{
			font-size: 30upx;
			color: #999999;
			line-height: 80upx;
		}
		.un-text1{
			font-size: 24upx;
			color: #999999;
			margin-left: 20upx;
		}
		.un-text2{
			font-size: 24upx;
			color: #F04844;
		}
	}
	
	.badge{
		position:absolute;
		top:20upx;
		right:50upx;
		color: #FFFFFF;
		display:flex;
		font-size: 38upx;
	}
	
</style>
